<template>
  <view class="category">
    <van-search
      shape="square"
      background="#eb4450"
      placeholder="请输入搜索关键词"
    />
    <!-- 内容 -->
    <van-tree-select
      :items="leftTitles"
      height="calc(100vh  - 54px)"
      :main-active-index="mainActiveIndex"
      @click-nav="onClickNav"
    >
      <!-- 右侧的内容 -->
      <scroll-view
        scroll-y
        class="sc_view"
        :scroll-top="scrollTop"
        slot="content"
      >
        <!-- 第一层循环 -->
        <view
          class="category_group"
          v-for="(item,index) in rightContent"
          :key="index"
        > 
          <!-- 小标题 -->
          <view class="cate_name">{{item.cat_name}}</view>
          <!-- 小商品内容 -->
          <view class="cate_list">
            <navigator
							:url="'/pages/goods_list/goods_list?id='+item2.cat_id"
              class="cate_item"
              v-for="(item2,index2) in item.children"
              :key="index2"
            >
              <!-- 商品图片 -->
              <image
                mode="widthFix"
                :src="item2.cat_icon"
              />
              <!-- 商品名称 -->
              <view>{{item2.cat_name}}</view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </van-tree-select>
  </view>
</template>

<script>
/* 
1 先分析接口和页面标签的数据联系  画图去分析
2 原生的html代码实现 常见 商品分类页面的 大体的布局  
3 获取到了接口的总数据 拆分
	1 左边很简单 标题数组  leftTitles
	2 右边 数据 根据左边被选中的标题 来获取 
4 给左边 绑定了点击事件 @click-nav="onClickNav"
	1 获取被点击的索引 让右边的内容跟着切换显示 
5 优化 点击了标题之后 内容切换之后 滚动条没有回到顶部
	1 先找文档 -> github 问题列表 -> 依靠自己来各种尝试去解决问题
	2 使用原生小程序 scroll-view scroll-top 可以解决问题
6 通过 1 方式来解决了问题
	1 scroll-view 标签
7 如何可以达到像上课老师那样去实现功能
	1 你怎么样达不到 时间不够 
	2 如何沿着某个学习方法 以后 达到 超越 ???
8 补缓存效果
	1 打开分类页面的时候 检查有没有缓存数据
	2 没有缓存 再去请求新的数据 显示 和 存起来
	3 有缓存-缓存数据没有过期  直接使用缓存数据做显示即可 
	4 假设 需要缓存的数据格式 (数据设计能力)
		{ time:时间戳,list:[{}] }


 */
export default {
  data() {
    return {
      // 左侧的标题数组
      leftTitles: [],
      // 右侧内容要显示的数据
      rightContent: [],
      mainActiveIndex: 0,
      // 接口的返回值 大数组
      categories: [],
      // 控制右侧scroll-view标签的 滚动距离
      scrollTop: 0,
    };
  },
  async onLoad() {
    // 1 先获取 本地存储的数据  默认值 空字符串
    const category = uni.getStorageSync("category");
    // 2 先判断数据是否存在
    // 数据是否 过期
    if (!category || Date.now() - category.time > 60 * 1000) {
      // 不用存在 获取 数据过期
      this.getCategory();
    } else {

			uni.showLoading("加载中")
      // 数据没有过期
      this.categories = category.list;
      // 构造了左侧要求的数据
      this.leftTitles = this.categories.map((v) => ({ text: v.cat_name }));
      // 要显示大家电下的内容
			this.rightContent = this.categories[0].children;
			uni.hideLoading();
    }
  },
  methods: {
    // 获取数据
    async getCategory() {
      this.categories = await this.get({ url: "/categories" });
      // 存数据
      uni.setStorageSync("category", {
        time: Date.now(),
        list: this.categories,
      });

      // 构造了左侧要求的数据
      this.leftTitles = this.categories.map((v) => ({ text: v.cat_name }));
      // 要显示大家电下的内容
      this.rightContent = this.categories[0].children;
    },

    // 左侧标题的点击事件
    onClickNav(event) {
      // 获取被点击的标题的索引
      const index = event.detail.index;
      // 实现了点击标题 右侧内容发生改变
      this.rightContent = this.categories[index].children;
      // scrollTop 每次都是 0
      this.scrollTop = Math.random();
    },
  },
};
</script>

<style lang="less">
.category_group {
  .cate_name {
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cate_list {
    display: flex;
    flex-wrap: wrap;
    .cate_item {
      width: 33.33%;
      text-align: center;
      image {
        width: 80%;
        margin: 0 auto;
      }
    }
  }
}
.sc_view {
  height: 100%;
}
</style>